<template>
<div>
<!--   我的申请   -->

<!--  高差  -->
  <div v-if="XiaoHiuZiZuJian">
  <el-form :inline="true" v-model="FlowDetaForm"  class="demo-form-inline">

    <el-form-item label="流程名称:">
      <el-input v-model="FlowDetaForm.fname" clearable placeholder="请输入审批名称" ></el-input>
    </el-form-item>


      <el-form-item label="审批状态:">
        <el-select v-model="FlowDetaForm.approvalStatus" clearable placeholder="审批状态" >
          <el-option label="审批中" value="1"></el-option>
          <el-option label="审批通过" value="2"></el-option>
          <el-option label="审批不通过" value="3"></el-option>
        </el-select>
      </el-form-item>

    <el-form-item>
      <el-button @click="queryFlowData">查询</el-button>
    </el-form-item>

  </el-form>


  <el-table
      :data="flowData"
      style="width: 100%">
    <el-table-column
        prop="id"
        label="编号"
    >
    </el-table-column>
    <el-table-column
        prop="fname"
        label="审批名称"
    >
    </el-table-column>
    <el-table-column
        prop="nodeName"
        label="当前审批节点"
    >
    </el-table-column>
    <el-table-column
        prop="userRealname"
        label="申请人">
    </el-table-column>

    <el-table-column
        prop="approvalStatus"
        :formatter="zhizhuanhuan"
        label="审批状态">
    </el-table-column>

    <el-table-column
        fixed="right"
        label="操作">
      <template slot-scope="scope">
      <el-button type="text" @click="getXiangQing(scope.row)">查看详情</el-button>
      </template>
    </el-table-column>

  </el-table>

  <!--  分页  -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 4, 6, 8]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.total">
  </el-pagination>

  </div>
  <!--  审批详情 对话框-->
  <div v-if="!XiaoHiuZiZuJian">
<!--    <el-dialog title="审批详情" :visible.sync="FlowDetails" @close="closeXiangQing" >-->

<!--      <GetDetails :DetailsData="DetailsData"></GetDetails>-->

<!--    </el-dialog>-->
    <CaseDetails :case-id="caseId" @back="back"></CaseDetails>


  </div>


</div>
</template>

<script>
// 引入查看详情组件
// import GetDetails from "./GetDetails";
import CaseDetails from "../../wyq/CaseDetails";

export default {
  name: "MyApply",
  // components:{GetDetails},
  components:{CaseDetails},
  data(){
    return{
      caseId:"",
      FlowDetaForm:{// 高差数据
        // approvalStatus:"1",
        pageSize:"2",
        pageCur:"1",
        applicant:JSON.parse(localStorage["user"])[0].id,

      },
      FlowDetails:false, // 控制审批详情对话框
      DetailsData:{},
      XiaoHiuZiZuJian:true ,//销毁查看详情子组件
      flowData:[], // 表数据
      pageData:{},

    }
  },
  created() {
    this.queryFlowData()
  },
  methods:{
queryFlowData(){ //查询我的申请
  const loading = this.$loading({
    lock: true,
    text: '正在载入...',
    spinner: 'el-icon-loading',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  this.$http.get("flowdatas",{params:this.FlowDetaForm})
  .then(res => {
    setTimeout(() => {
      loading.close();
    });
    this.pageData = res.data.data
    this.flowData = res.data.data.list
  })
  .catch()

},
    zhizhuanhuan(row){
  return row.approvalStatus=='1'?'审批中':row.approvalStatus=='2'?'审批通过':'审批不通过'
    },
    getXiangQing(rowData){// 查看详情
  this.caseId = rowData.dataColumn
      // rowData.data_table = rowData.dataTable
      // rowData.data_column = rowData.dataColumn
      this.XiaoHiuZiZuJian=false //显示子组件
      // this.DetailsData=rowData;
      // console.log(this.DetailsData)
      // this.FlowDetails=true //打开对话框
    },
    back(){
      this.XiaoHiuZiZuJian = true
      this.queryFlowData();
    },
    closeXiangQing(){//关闭审批详情对话框触发
      //销毁子组件
      this.XiaoHiuZiZuJian=false
    },
    handleSizeChange(val){
      this.FlowDetaForm.pageSize=val
      this.queryFlowData();
    },
    handleCurrentChange(val){
      this.FlowDetaForm.pageCur=val
      this.queryFlowData()

    },

  }
}
</script>

<style scoped>

</style>